<template>
    <div class="page-list">
        <ul class="list">
            <li class="list-item" v-for="item in attrObj.pageList" :key="item.id">
                <div class="img">
                    <img src="../../../public/static/logo.png" alt="">
                </div>
                <div class="info">
                    <h3 class="title">{{item.pageName}}</h3>
                    <div class="detail">
                        这是描述部分，你可以自行描述
                    </div>
                    <div class="ctrl">
                        <span class="edit icon" @click="editPage(item)">
                            <el-icon :size="attrObj.size" :color="attrObj.color">
                                  <Edit />
                            </el-icon><span class="name">编辑</span>
                        </span>
                        <span class="preview icon" @click="previewPage(item)">
                            <el-icon :size="attrObj.size" :color="attrObj.color">
                                  <View />
                            </el-icon><span class="name" >预览</span>
                        </span>
                        <span class="preview icon">
                            <el-icon :size="attrObj.size" :color="attrObj.color">
                                  <Clock />
                            </el-icon><time class="name time" datetime="">{{dayjs(item.updateTime).format('YYYY-MM-DD HH:mm:ss')}}</time>
                        </span>
                        
                    </div>
                </div>
            </li>
        </ul>
        <div class="fixed-btn">
            <el-icon :size="40" :color="attrObj.color" title="新增页面" @click="addPage"><CirclePlusFilled /></el-icon>
        </div>
    </div>
</template>

<script>
import { ref, computed, getCurrentInstance } from 'vue'
import { basicPage } from '@/api/index.js'
import { useStore  } from 'vuex'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
export default {
    // components: {Edit},
    setup() {
        const attrObj = ref({
            iconSize: 24,
            color: '#55aaff',
            pageList: []
        })
        let page = ref({
            pageNum: 1,
            pageSize: 10,
            total: 0
        })
        const store = useStore(); // 使用useStore方法
		const router = useRouter();
        const { ctx } = getCurrentInstance();
		console.log(ctx.root)
		console.log(ctx)
        let userInfo = computed(() => store.state.userInfo);
        let loginStatus = computed(() => store.state.loginStatus);
        function getPageList() {
            if (!loginStatus.value) {
                return 
            }
            let params = {
                pageNum: page.value.pageNum,
                pageSize: page.value.pageSize,
                userId: userInfo.value.userId
            }
            basicPage.getPageListByUser(params).then(res => {
                if (res.status === 1) {
                    attrObj.value.pageList = res.data.list
                    page.value.total = 0;
                } else {
                    attrObj.value.pageList = []
                    page.value.total = 0;
                    ElMessage({
                        message: '获取页面列表失败',
                        type: 'error'
                    })
                }
            })
        }
        // 编辑页面
        function editPage(item) {
            router.push({path: '/edit', query: {id: item.id}})
        }
        // 预览页面
        function previewPage(item) {
            router.push({path: '/preview', query: {id: item.id}})
        }
        // 新增页面
        function addPage() {
            router.push('/edit')
        }
        getPageList()
        return {
            attrObj,
            dayjs,
            editPage,
            previewPage,
            addPage
        }
    }
}
</script>

<style scoped lang="less">
    .page-list {
        .list {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            padding: 10px 5%;
            .list-item {
                width: 47.65%;
                display: flex;
                align-items: center;
                border: 1px solid #a0cfff;
                margin-bottom: 20px;
                padding: 5px 10px;
                &:nth-of-type(odd) {
                    margin-right: 20px;
                }
                &:hover {
                    box-shadow: 0px 0px 5px 3px rgba(160, 207, 255, .5);
                }
                .img {
                    min-width: 100px;
                    min-height: 100px;
                    max-width: 100px;
                    max-width: 100px;
                    img {
                        width: 100%;
                        height: auto;
                    }
                }
                .title {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .info {
                    flex: 1 1 auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 100%;
                    max-width: 85%;
                    padding: 5px 10px;
                    box-sizing: border-box;
                    .ctrl {
                        display: flex;
                        align-items: center;
                        margin: 5px 0;
                        justify-content: flex-end;
                        .icon {
                            display: flex;
                            align-items: center;
                            cursor: pointer;
                            // font-size: 16px;
                            margin-right: 15px;
                            color: #959595;
                            &:last-child {
                                margin-right: 0;
                            }
                            &:hover {
                                color: #55aaff;
                            }
                            .name {
                                margin-left: 3px;
                            }
                        }
                    }
                }
            }
        }
        .fixed-btn {
            position: fixed;
            right: 100px;
            bottom: 100px;
            cursor: pointer;
        }
    }
</style>
